<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="发送类型：">
					<el-select v-model="state.queryParams.send_type" placeholder="请选择发送类型" class="w-[180px]">
						<el-option v-for="item in sendType" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="通知标题：">
					<el-input v-model="state.queryParams.title" placeholder="请输入通知标题" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="通知账号：">
					<el-input v-model="state.queryParams.account" placeholder="请输入通知账号" class="w-[180px]" />
				</el-form-item>
				<el-form-item label="通知端口：">
					<el-select class="w-[150px]" v-model="state.queryParams.notice_type">
						<el-option label="全部" value="" />
						<el-option label="用户" value="1" />
						<el-option label="平台" value="2" />
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="w-[150px]" v-model="state.queryParams.status">
						<el-option label="全部" value="" />
						<el-option label="等待" value="0" />
						<el-option label="成功" value="1" />
						<el-option label="失败" value="2" />
					</el-select>
				</el-form-item>
				<el-form-item label="时间范围：">
					<datePicker v-model:dateTime="state.queryParams.create_time" :isPickerOptions="true" />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-table :data="state.tableList" v-loading="state.loading" style="width: 100%">
				<el-table-column prop="id" label="ID" width="120" />
				<el-table-column prop="title" label="通知标题" show-overflow-tooltip></el-table-column>
				<el-table-column prop="account" label="通知账号" show-overflow-tooltip></el-table-column>
				<el-table-column label="消息类型">
					<template #default="{ row }">
						<el-tag type="success" v-if="row.is_captcha">验证码</el-tag>
						<el-tag type="primary" v-else>消息通知</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="notice_type_desc" label="通知端口" show-overflow-tooltip></el-table-column>
				<el-table-column prop="send_type_desc" label="发送类型" show-overflow-tooltip></el-table-column>
				<el-table-column prop="content" label="通知内容" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="{ row }">
						<el-tag type="primary" v-if="row.status == 0">{{ row.status_desc }}</el-tag>
						<el-tag type="success" v-else-if="row.status == 1">{{ row.status_desc }}</el-tag>
						<el-tag type="danger" v-else>{{ row.status_desc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template #default="{ row }">
						<div class="flex">
							<el-button type="primary" link @click="handleDetail(row)"> 详情 </el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-model="state" @tableChange="getTableList" />
		</el-card>
		<DetailDialog v-if="showDialog" ref="detailRef" @submit="getTableList" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="messageLog">
import { reactive, onMounted, ref, nextTick } from 'vue';
import { noticeLogLists } from '/@/api/setting/notice';
import { usePage } from '/@/hooks/usePage';
import DetailDialog from '/@/views/setting/message/component/LogDetail.vue';

const detailRef = ref();

const showDialog = ref(false);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		account: '',
		title: '',
		send_type: '',
		notice_type: '',
		scene: '',
		status: '',
		create_time: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: noticeLogLists });

// 访问方式
const sendType = ref<Array<any>>([
	{
		label: '全部',
		value: '',
	},
	{
		label: '系统通知',
		value: '1',
	},
	{
		label: '短信通知',
		value: '2',
	},
	{
		label: '微信模板消息',
		value: '3',
	},
	{
		label: '小程序模板消息',
		value: '4',
	},
	{
		label: '邮件通知',
		value: '5',
	},
]);

const handleDetail = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		detailRef.value?.setFormData(row, function () {
			detailRef.value?.open();
		});
	});
};

// 页面加载时
onMounted(() => {
	getTableList();
});
</script>

<style scoped lang="scss"></style>
